<template>
  <div class="layout" v-if="!isShowSkeleton">
    <div class="left">
      <!-- banner区域 -->
      <div class="banner">
        <el-image :src="Img" fit="cover"></el-image>
        <div class="box">
          <button class="btn">
            <el-icon size="18" color="#E6A23C" style="margin-right: 8px"><Operation /></el-icon>
            精品歌单
          </button>
          <span>你小时候做过什么可以吹嘘一辈子的事情？</span>
        </div>
      </div>
      <!-- 歌曲类型 -->
      <div class="type">
        <div class="title">全部歌单</div>
        <div class="list">
          <span
            class="list-item"
            v-for="item in typeList"
            :key="item.id"
            :class="{ active: activeIndex === item.id }"
            @click="activeIndex = item.id"
            >{{ item.name }}</span
          >
        </div>
      </div>

      <!-- 歌单推荐列表 -->
      <div class="recommend">
        <div class="list">
          <div class="list-item" v-for="item in 16" :key="item">
            <el-image :src="Img" fit="cover"></el-image>
            <span>如果你是地球，想对人类说什么让他们不要摧毁你？</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 最新音乐 -->
      <div class="newMusic">
        <div class="title">
          <span>最新音乐</span>
          <span @click="handleShowMore">更多音乐</span>
        </div>

        <div class="list" @click="handleClick">
          <div
            class="list-item"
            v-for="(item, index) in newMusicList"
            :key="item"
            :data-index="index"
          >
            <div class="img">
              <el-image :src="item.img" fit="cover"></el-image>
              <span id="playbtn"></span>
            </div>
            <div class="box">
              <div class="title">
                <span>{{ item.name }}</span>
                <span>{{ item.hotcomment }}</span>
              </div>
              <div class="singer">{{ item.singer }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门歌手 -->
      <div class="hotSinger">
        <div class="title">
          <span>最新音乐</span>
          <span>更多音乐</span>
        </div>

        <div class="list">
          <div class="list-item" v-for="item in 5" :key="item">
            <el-image :src="Img" fit="cover"></el-image>
            <div class="box">
              <div class="title">
                <span>拥有一台1300不到的4K显示器是一种什么样的体验?</span>
              </div>
              <div class="singer">by:小幸运弄儿</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 骨架屏 -->
  <template v-else>
    <SkeletonScreen :isShowSkeleton="isShowSkeleton" />
  </template>
  <!-- 抽屉 -->
  <Drawer :isShowDrawer="isShowDrawer" @handleClose="isShowDrawer = false" />
</template>

<script setup>
// import { ref, reactive } from 'vue'
import { Operation } from '@element-plus/icons-vue'
import Img from '../../../../assets/images/avatar.jpg'
import { ref } from 'vue'
import Drawer from './components/Drawer.vue'
import SkeletonScreen from './components/SkeletonScreen.vue'
import router from '@/router'

const activeIndex = ref(1)
const isShowDrawer = ref(false)
const isShowSkeleton = ref(true)

setTimeout(() => {
  isShowSkeleton.value = false
}, 3000)

const typeList = ref([
  {
    name: '华语',
    id: 1
  },
  {
    name: '流行',
    id: 2
  },
  {
    name: '摇滚',
    id: 3
  },
  {
    name: '民谣',
    id: 4
  },
  {
    name: '另类/独立',
    id: 5
  },
  {
    name: '轻音乐',
    id: 6
  },
  {
    name: '影视原声',
    id: 7
  },
  {
    name: 'ACG',
    id: 8
  }
])

// 最新音乐列表数据
const newMusicList = ref([
  {
    id: 1,
    name: '主旋律（Live In Hong Kong，2013）',
    singer: 'SQ Whitehorse',
    hotcomment: '如果你是地球，想对人类说什么让他们不要摧毁你？',
    img: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png'
  },
  {
    id: 2,
    name: '夜的第七章',
    singer: '周杰伦',
    hotcomment: '同样是背叛德云社，为什么郭德纲欢迎曹云金回家，却痛恨何云伟？',
    img: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png'
  },
  {
    id: 3,
    name: '上学威龙',
    singer: '范晓萱',
    hotcomment: 'HBO这次的尺度，真是万万没想到…',
    img: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/6.png'
  },
  {
    id: 4,
    name: '水手公园',
    singer: '海龟先生',
    hotcomment: '【华语·情歌】因为你我对人生满怀期待',
    img: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/7.png'
  },
  {
    id: 8,
    name: '火车叨位去',
    singer: '孙燕姿',
    hotcomment: '为什么美国程序员工作比中国程序员工作轻松、加班少？',
    img: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/2.png'
  }
])

// 显示更多歌曲
const handleShowMore = () => {
  console.log('点击咯')

  isShowDrawer.value = true
}

// 点击播放音乐
const handleClick = (event) => {
  // 获取被点击的元素
  const target = event.target.closest('.list-item')

  // 检查是否点击了 .list-item
  if (target) {
    const index = target.dataset.index
    console.log(index)

    router.push({ name: 'MusicPlayer', query: { musicID: index } })
  }
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  justify-content: space-between;

  .left {
    width: 820px;
    height: 100%;

    .banner {
      padding: 27px 25px;
      display: flex;
      // align-items: center;

      position: relative;
      width: 100%;
      height: 194px;
      background: url('../../../../assets/images/bgi.png') no-repeat center;
      vertical-align: middle;

      &::before {
        content: '';

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 194px;
        opacity: 1;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.01);
        backdrop-filter: blur(40px);
      }

      .el-image {
        width: 140px;
        height: 140px;
        border-radius: 8px;
      }

      .box {
        // position: absolute;
        // top: 0;
        // left: 0;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: start;
        margin-left: 20px;
        .btn {
          padding: 4px 10px;
          color: #e6a23c;
          font-size: 14px;
          line-height: 20px;
          background-color: transparent;
          border: 1px solid #e6a23c;
          border-radius: 20px;
        }

        span {
          margin-top: 15px;
          font-size: 16px;
          line-height: 22px;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
    }

    .type {
      margin: 32px 0 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .title {
        padding: 4px 16px;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        color: #131414;
        border: 1px solid #dcdfe6;
        border-radius: 30px;
      }

      .list {
        padding: 4px 0;
        .list-item {
          margin-right: 18px;
          font-size: 14px;
          line-height: 24px;
          text-align: center;
          letter-spacing: 0px;
          color: #131414;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }
        }

        .active {
          color: #f56c6c;
        }
      }
    }

    .recommend {
      width: 100%;

      .list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        .list-item {
          width: 190px;
          height: 207px;
          background-color: #fff;
          border-radius: 8px;

          span {
            padding: 12px 12px;
            display: -webkit-box;
            font-size: 14px;
            line-height: 24px;
            text-align: justify;
            color: #909399;
            overflow: hidden; //多出的隐藏
            text-overflow: ellipsis; //多出部分用...代替
            display: -webkit-box; //定义为盒子模型显示
            -webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
            -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
          }
        }

        .list-item:hover {
          animation: moveUp 0.1s linear forwards;
        }

        @keyframes moveUp {
          0% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-5px);
            box-shadow: 1px 0 3px rgba(0, 21, 41, .35);
          }
          100% {
            transform: translateY(-12px);
            box-shadow: 2px 2px 6px rgba(0, 21, 41, .35);
          }
        }
      }
    }
  }

  .right {
    width: 840px;
    height: 100%;

    .newMusic {
      padding: 20px 20px;
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;

      .title {
        display: flex;
        align-content: center;
        justify-content: space-between;

        span {
          font-size: 20px;
          font-weight: bold;
          line-height: 28px;
          color: #131414;
          cursor: pointer;

          &:last-child {
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
          }
        }
      }

      .list {
        display: flex;
        flex-direction: column;

        .list-item {
          margin-bottom: 16px;
          display: flex;

          .img {
            position: relative;

            .el-image {
              width: 60px;
              height: 60px;
              border-radius: 5px;
            }
            #playbtn {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);

              width: 24px;
              height: 24px;
              border-radius: 24px;
              overflow: hidden;
              background-color: #fff;

              &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-style: solid;
                border-width: 7px 0 7px 10px;
                border-color: transparent transparent transparent #1a1d25;
              }
            }
          }

          &:last-child {
            margin-bottom: 0;
          }

          .box {
            margin-left: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
              font-size: 14px;
              font-weight: normal;
              line-height: 24px;
              color: #131414;

              &:last-child {
                font-size: 14px;
                font-weight: normal;
                line-height: 24px;
                color: #c0c4cc;
              }
            }
          }

          &:hover {
            cursor: pointer;
            background-color: #eee;
          }
        }
      }
    }

    .hotSinger {
      margin-top: 20px;
      padding: 20px 20px;
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;

      .title {
        display: flex;
        align-content: center;
        justify-content: space-between;

        span {
          font-size: 20px;
          font-weight: bold;
          line-height: 28px;
          color: #131414;
          cursor: pointer;

          &:last-child {
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
          }
        }
      }

      .list {
        display: flex;
        flex-direction: column;

        .list-item {
          margin-bottom: 16px;
          display: flex;

          .el-image {
            width: 350px;
            height: 120px;
            border-radius: 5px;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .box {
            margin-left: 28px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
              font-size: 18px;
              font-weight: normal;
              line-height: 24px;
              color: #131414;
            }

            .singer {
              font-size: 14px;
              line-height: 24px;
              color: #c0c4cc;
            }
          }
        }
      }
    }
  }
}
</style>
